<script setup lang="ts">

const { type } = defineProps<{
    type?: number
}>()

</script>

<template>
    <div class="loading-comp ">
        <div class="home-loading flex flex-col items-center" v-show="!type">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="text text-gray-400">页面加载中...</div>
        </div>

        <div class="loader" v-show="type == 1">
            <div class="outer"></div>
            <div class="middle"></div>
            <div class="inner"></div>
        </div>

        <div class="search-loader" v-show="type == 2">
            <div></div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@keyframes music {

    0% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(.2);
    }

    100% {
        transform: scaleY(1);
    }

}

.home-loading {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

ul {
    display: flex;

    li {
        animation: music 1.5s 0s infinite ease-in-out;

        &:nth-child(2) {
            animation-delay: .2s;
        }

        &:nth-child(3) {
            animation-delay: .3s;
        }

        &:nth-child(2n) {
            height: 15px;
        }

        &:nth-child(2n+1) {
            height: 18px;
        }
    }

    li {
        width: 3px;
        margin: 0 2px;
        background-color: skyblue
    }
}


.loader {
    position: relative;
    left: 50%;
    top: 50%;
    height: 100px;
    transform: translate(-50%, 50%);
    z-index: 10;
}

.outer,
.middle,
.inner {
    border: 3px solid transparent;
    border-top-color: #3cefff;
    border-right-color: #3cefff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
}

.outer {
    width: 3.5em;
    height: 3.5em;
    margin-left: -1.75em;
    margin-top: -1.75em;
    animation: spin 2s linear infinite;
}

.middle {
    width: 2.1em;
    height: 2.1em;
    margin-left: -1.05em;
    margin-top: -1.05em;
    animation: spin 1.75s linear reverse infinite;
}

.inner {
    width: 0.8em;
    height: 0.8em;
    margin-left: -0.4em;
    margin-top: -0.4em;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.search-loader {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

    div {
        position: relative;
        width: 2em;
        height: 2em;
        border: 3px solid #3cefff;
        overflow: hidden;
        animation: spin 3s ease infinite;
    }

    div::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        width: 2em;
        height: 2em;
        background-color: hsla(185, 100%, 62%, 0.75);
        transform-origin: center bottom;
        transform: scaleY(1);
        animation: fill 3s linear infinite;
    }

    @keyframes spin {

        50%,
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes fill {

        25%,
        50% {
            transform: scaleY(0);
        }

        100% {
            transform: scaleY(1);
        }
    }

}
</style>